<template>
	<view class="page">
		<fu-custom bgColor="bg-white" :isBack="true">
			<view slot="content">{{i18n['评价']}}</view>
		</fu-custom>
		<view class="padding-lr-24 padding-top-24">
			<block v-for="(item, index) in order_goods_list" :key="index">
				<view class="margin-bottom-sm bg-white radius-16 padding-tb padding-lr-sm">
					<view class="flex solid-bottom padding-bottom">
						<view class="fu-block-140">
							<fu-image radius="16rpx" :src="item.goods_thumb" mode="aspectFill"></fu-image>
						</view>
						<view class="padding-left-sm flex-sub flex flex-direction justify-between overHidden">
							<view class="overHidden">
								<view class="text-df text-333 text-cut">{{ item.goods_name }}</view>
								<view class="flex align-center margin-top-16">
									<view class="flex align-center margin-right-48">
										<image src="https://localelife.chunchuangkeji.cn/h5img/images/007.png" class="fu-block-22 margin-right-6"></image>
										<text class="text-666 fu-fs20" v-if="item.is_appointment">需要预约</text>
										<text class="text-666 fu-fs20" v-else>无需预约</text>
									</view>
									<view class="flex align-center">
										<image src="https://localelife.chunchuangkeji.cn/h5img/images/008.png" class="fu-block-22 margin-right-6"></image>
										<text class="text-666 fu-fs20">{{item.business_hours}}</text>
									</view>
								</view>
							</view>
							<view class="flex align-baseline">
								<view class="flex align-center">
									<view class="" v-if="order_type==4">
										<text class="text-xl text-red">{{item.total_integral}}</text>
										<text class="text-df text-red">积分</text>
									</view>
									<view class=" text-bold" style="color: #FF5C5C;" v-if="item.shop_price !== '0.00'">
										<text class="text-price fu-fs20"></text>
										<text class="">{{item.shop_price}}</text>
									</view>
								</view>
								<!-- <text class="text-999">x{{item.num}}</text> -->
								<view class="text-through text-999 fu-fs20 margin-left-16">¥{{item.market_price}}</view>
							</view>
						</view>
					</view>
					<view class="flex align-center solid-bottom padding-tb">
						<view class="margin-right-40">{{i18n['商品评价']}}</view>
						<view>
							<fu-star voidColor="#EBEBEB" color="#FFA20D" :value="commentsArray[index].star"
								@change="changeLevel($event,index)"></fu-star>
						</view>
					</view>
					<textarea class="height-272 margin-top bg-f8 radius-16 padding text-333 fu-fs28 w100"
						:placeholder="i18n['请输入您的评价']" placeholder-class="text-999"
						v-model="commentsArray[index].content"></textarea>
					<view class="margin-top">
						<text class="fu-fs32 text-333">{{i18n["添加照片"]}}</text>
						<text class="fu-fs24 text-bf margin-left-sm">{{i18n['最多可上传9张']}}</text>
					</view>
					<view class="margin-top-sm">
						<fu-upload :col="4" :max="9" @change="chooseImages($event,index)"></fu-upload>
					</view>
					<!-- <view class="margin-top">
            <view class="fu-fs32 text-333">{{i18n['添加视频']}}</view>
            <view class="margin-top-sm">
              <fu-upload-video
                :col="4"
                :video="commentsArray[index].video"
                @change="chooseVideo($event,index)"
              ></fu-upload-video>
            </view>
          </view> -->
					<view class="margin-top-sm flex margin-bottom">
						<view @tap="handleSwitch(index)">
							<image v-if="!commentsArray[index].anonymous" class="fu-block-32"
								:src="imgBaseUrl + 'checked.png'">
							</image>
							<image v-else class="fu-block-32" :src="imgBaseUrl + 'unchecked.png'"></image>
						</view>
						<view class="text-sm text-666 margin-left-sm">{{i18n['匿名评价']}}</view>
					</view>
				</view>
			</block>
		</view>
		<view class="submit-btn margin-lr height-88 line-height-88 text-white fu-fs32 round bg-theme text-center"
			@click="handleSubmit">{{i18n['提交']}}</view>
		<fu-notwork></fu-notwork>
		<!-- 评论送喵币 -->
		<fu-popup v-model="commentPopup" mode="center" border-radius="16">
			<view class="hx-popup justify-center">
				<view class="giveBox">
					<image src="../../../../static/mew/moneyImg.png" mode="" class="icon1"></image>
				</view>
				<image src="https://localelife.chunchuangkeji.cn/h5img/images/close-2.png" class="fu-block-36 margin-top-80" @click="hxPopup = false"></image>
			</view>
		</fu-popup>
	</view>
</template>

<script>
	import fuUpload from "../../components/fu-upload/fu-upload.vue";
	import fuUploadVideo from "../../components/fu-upload-video/fu-upload-video.vue";
	export default {
		components: {
			fuUpload,
			fuUploadVideo,
		},
		data() {
			return {
				levels: [1, 2, 3, 4, 5],
				level: 5,
				imgs: [],
				imgs_ids: [],
				anonymous: false,
				marks: "",
				images: [],
				star_txt: global.i18n["非常好"],
				order_sn: null,
				goods_thumb: null,
				goods_name: "",
				order_goods_list: [], //商品数据
				commentsArray: [], //评价统计数组
				isclick: false, //防误触
				itemIndex: 0, // 当前操作订单索引
				commentPopup:false
			};
		},
		methods: {
			// 切换是否匿名
			handleSwitch(index) {
				this.commentsArray[index].anonymous = !this.commentsArray[index].anonymous;
			},
			chooseImages(val, index) {
				this.commentsArray[index].thumb = val;
			},
			chooseVideo(val, index) {
				this.commentsArray[index].video = String(val);
			},
			changeLevel(num, index) {
				this.commentsArray[index].star = num;
				switch (num) {
					case 1:
						this.commentsArray[index].star_txt = this.i18n["非常差"];
						break;
					case 2:
						this.commentsArray[index].star_txt = this.i18n["差"];
						break;
					case 3:
						this.commentsArray[index].star_txt = this.i18n["一般"];
						break;
					case 4:
						this.commentsArray[index].star_txt = this.i18n["好"];
						break;
					case 5:
						this.commentsArray[index].star_txt = this.i18n["非常好"];
						break;
				}
			},
			//提交评价
			handleSubmit() {
				if (this.isclick) {
					this.$message.info(this.i18n["您的手速太快了"]);
					return;
				};
				this.isclick = true;
				setTimeout(() => {
					this.isclick = false;
				}, 2000)
				const uid = (global.userInfo && global.userInfo.id) || 0;
				let flag = false;
				this.commentsArray.forEach(val => {
					if (!val.content.trim()) {
						flag = true;
						return;
					}
				})
				if (flag) {
					this.$message.info(this.i18n["请输入您对该商品评论内容"]);
					return;
				}
				let goods_comment = [];
				this.commentsArray.forEach(val => {
					goods_comment.push({
						star: val.star,
						content: val.content,
						thumb: val.thumb,
						video: val.video,
						type: val.anonymous ? 1 : 0,
						goods_id: val.goods_id,
						sku_id: val.sku_id
					})
				})
				let data = {
					user_id: uid,
					order_sn: this.order_sn,
					goods_comment: JSON.stringify(goods_comment)
				};
				let requestUrl = this.order_type == 4 ? global.apiUrls.postIntegralOrderEvaluate : global.apiUrls
					.postOrderEvaluate;
				this.$api.post(requestUrl, data).then((res) => {
					if (res.data.code == 1) {
						this.$message.info(this.i18n["评论成功"]);
						setTimeout(() => {
							uni.$emit('onPageUpdata', {
								type: 6,
								index: this.itemIndex
							});
							uni.$emit('onOrederDetailPageUpdata')
							uni.navigateBack();
						}, 800);
					} else {
						this.$message.info(res.data.msg);
					}
				});
			},
		},
		onLoad(options) {
			const {
				order_sn,
				order_type,
				itemIndex
			} = options;
			this.order_type = order_type;
			this.order_sn = order_sn;
			this.itemIndex = itemIndex;
			let order_goods_list = JSON.parse(uni.getStorageSync("order_goods_list"));
			console.log(order_goods_list, 'order_goods_list')
			if (order_goods_list) {
				// order_goods_list = order_goods_list.filter(ele => ele.nonrefundable == 0 && ele.refund_id == 0);
				this.order_goods_list = order_goods_list;
				console.log("order_goods_list", order_goods_list);
				let commentsArray = [];
				order_goods_list.forEach(val => {
					commentsArray.push({
						thumb: [],
						star: 5,
						content: '',
						anonymous: false,
						star_txt: this.i18n["非常好"],
						sku_id: val.sku_id,
						goods_id: val.goods_id,
						order_sn: val.order_sn
					})
				})
				this.commentsArray = commentsArray;
			}
		},
		onUnload() {
			uni.removeStorageSync("order_goods_list");
		},
	};
</script>

<style lang="scss" scoped>
	.giveBox{
		width: 574rpx;
		height: 442rpx;
		background: url(../../../../static/mew/commentBg.png) no-repeat;
		background-size: 100% 100%;
	}
	.icon1{
		width: 145rpx;
		height: 148rpx;
	}
	.page {
		min-height: 100vh;
		padding-bottom: 120rpx;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.submit-btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 50rpx;
			bottom: calc(50rpx + constant(safe-area-inset-bottom));
			bottom: calc(50rpx + env(safe-area-inset-bottom));
			z-index: 9999;
		}
	}
</style>
